<template>
    <div>
        <a-card style="height: 95vh">
            <!-- 新增按钮 -->
            <a-row class="yy-Row">
                <a-col :span="12">
                    <a-space>
                        <a-button type="primary" v-has="'btn_SEM3200_add'" @click="addData">{{$t('btn.add')}}</a-button>
                    </a-space>
                </a-col>
            </a-row>
            <!-- table展示 -->
            <a-row>
                <a-col :span="24">
                    <m-table
                        :columns="columns"
                        :dataSource="dataSource"
                        :loading="loadTable"
                        bordered
                        :rowKey="(record,index)=>{return index}"
                        :row-click="customRowTest"
                        :pagination="dataPagination"
                    >
                        <template slot="action" slot-scope="text, record" v-if="!record.isEmpty">
                            <div>
                                <span>
                                    <a-button type="primary" size="small" v-has="'btn_SEM3200_update'"
                                              @click="() => updateData(record)">{{$t('btn.update')}}</a-button>
                                    <a-popconfirm
                                        :title="$t('menuItem.confirmDel')"
                                        :okText="$t('menuItem.confirm')"
                                        :cancelText="$t('menuItem.cancel')"
                                        @confirm="() =>deleteData(record)"
                                    >
                                        <a-button type="danger" v-has="'btn_SEM3200_delete'" style="margin-left: 5px;"
                                                  size="small">{{$t('btn.delete')}}</a-button>
                                    </a-popconfirm>
                                    <a-button type="primary" size="small"
                                              v-has="'btn_SEM3200_assign'"
                                              @click="() => assignPermission(record)"
                                              style="margin-left: 5px;background-color: #63cda5;border-color: #63cda5;">{{$t('menuItem.AssignPerssion')}}</a-button>
                                </span>
                            </div>
                        </template>
                    </m-table>
                </a-col>
            </a-row>
        </a-card>

        <!-- 新增/編輯角色 -->
        <a-modal centered
                 width="30%"
                 :visible="capvisible"
                 :title="$t('menuItem.AddOrUpdatePermissionGroup')"
                 :okText="$t('menuItem.confirm')"
                 :cancelText="$t('menuItem.cancel')"
                 @ok="addAndEdithandleOk"
                 @cancel="caphandleCancel">
            <a-card>
                <a-form-model
                    :model="capForm"
                    ref="capForm"
                    labelAlign="right"
                    layout="inline"
                    :rules="rules"
                    :label-col="{span: 10}"
                    :wrapper-col="{span: 14}"
                >
                    <a-row style="margin:1rem 0">
                        <a-col >
                            <a-form-model-item :label="$t('menuItem.RoleCode')" prop="name" style="width: 100%;">
                                <a-input :disabled="isFlag == 'EDIT'" v-model="capForm.name"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row style="margin:1rem 0">
                        <a-col>
                            <a-form-model-item :label="$t('menuItem.Roledes')" prop="desc" style="width: 100%;">
                                <a-input v-model="capForm.desc" type="textarea"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </a-card>
        </a-modal>

        <!-- 分配权限 -->
        <a-modal
            :title="$t('menuItem.AssignPerssion')"
            :visible="controlVisible"
            @ok="controTreelOk"
            @cancel="controlTreeCancel"
            :okText="$t('menuItem.confirm')"
            :cancelText="$t('menuItem.cancel')"
        >
            <a-tree
                v-model="checkedKeysList"
                checkable
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :selected-keys="selectedKeys"
                :tree-data="treeData"
                @expand="onExpand"
                @select="onSelect"
            />
        </a-modal>
    </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import MTable from "../../../components/MTable";

export default {
    name: 'RoleManage',
    components: {MTable},
    data() {
        return {
          columns: [
            {
              title: this.$t('menuItem.RoleCode'),
              dataIndex: 'roleName',
              key: 'roleName',
              align: 'center',
            },
            {
              title: this.$t('menuItem.Roledes'),
              dataIndex: 'roleDesc',
              key: 'roleDesc',
              align: 'center',
            },
            {
              title: this.$t('menuItem.UserTableOperation'),
              dataIndex: 'action',
              key: 'action',
              align: 'center',
              scopedSlots: {customRender: 'action'},
            },
          ],
            rules: {
                name: [{required: true, message: this.$i18n.tc('menuItem.PleaseRoleCode')}]
            },
            windowHeight: document.documentElement.clientHeight,   //实时屏幕高度\
        }
    },
    computed: {
        ...mapState('js3200', ['dataPagination','dataSource', 'isFlag', 'loadTable', 'capvisible', 'capForm',
            'controlVisible', 'treeData', 'expandedKeys', 'autoExpandParent', 'selectedKeys', 'checkedKeys']),
        // 分配权限弹框选中值
        checkedKeysList: {
            get() {
                return this.checkedKeys
            },
            set(val) {
                this.setCheckedKeys(val)
            }
        }
    },
    methods: {
        ...mapMutations('js3200', ['setDataPagination','queryRole', 'addData', 'updateData', 'deleteData',
            'assignPermission', 'customRow', 'caphandleOk', 'caphandleCancel', 'controTreelOk',
            'controlTreeCancel', 'setExpandedKeys', 'setCheckedKeys', 'setSelectedKeys', 'queryUserBindedRole']),
        setTableHeight(){
            let pageSize = parseInt((document.documentElement.clientHeight - 240) / 41)
            this.setDataPagination({
                ...this.dataPagination,
                pageSize: pageSize,
            })
        },
        // 设置选中行
        customRowTest(record, index) {
            this.customRow(record)
        },
        // 树节点展开
        onExpand(expandedKeys) {
            this.setExpandedKeys(expandedKeys);
        },
        // 树节点选中
        onSelect(selectedKeys, info) {
            this.setSelectedKeys(selectedKeys);
        },
        // 新增编辑角色弹窗确认
        addAndEdithandleOk() {
            this.$refs.capForm.validate(valid => {
                if (valid) {
                    this.caphandleOk()
                }
            })
        },
    },
    beforeMount() {
        this.setTableHeight()
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                window.fullHeight = document.documentElement.clientHeight;
                this.windowHeight = window.fullHeight;
            })();
        };
        // 查询角色列表
        this.queryRole()
        // 查询登录用户绑定角色
        this.queryUserBindedRole()
    },
    watch: {
        // 监听新增编辑弹窗
        '$store.state.js3200.capvisible': {
            deep: true,
            handler(val) {
                if (!val) {
                    this.$refs.capForm.resetFields();
                }
            }
        },
        windowHeight(val){
            this.setTableHeight()
        }
    },
}
</script>


<style scoped>
.yy-Right {
    display: flex;
    justify-content: flex-end;
}

.yy-Row {
    margin-bottom: 1rem
}
</style>
